<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/comment.css">
    <script src="./js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="icon" href="./images/icon.png">
    <title>评论管理</title>
    <script>
        $(function () {
            $('.btnDel').click(function () {
                if (confirm('确认要删除此评论吗？')) {
                    $(this).parent().parent().remove()
                }
            })
            $('#checkAll').click(function () {
                $('.check').prop("checked", this.checked)
            })
            $('#del').click(function () {
                if ($('.check:checked').length > 0) {
                    if (confirm('确认要删除此评论吗？')) {
                        $('.check:checked').parent().parent().remove()
                    }
                } else {
                    alert('未选中需要删除的评论')
                }
            })
        })
    </script>
</head>

<body>
    <iframe src="./header.html" scrolling="no" frameborder="0" width="100%" height="45px" frameborder="0"></iframe>
    <iframe src="./personalCenter.html" scrolling="no" frameborder="0" width="100%" height="70px"
        frameborder="0"></iframe>
    <div class="outer">
        <input type="checkbox" id="checkAll">全选
        <button id="del">批量删除</button>
        <table class="table table-hover tableStyle" border="1">
            <tr>
                <td></td>
                <td scope="col">图书编号</td>
                <td scope="col">用户信息</td>
                <td scope="col">评论内容</td>
                <td scope="col">操作</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" class="check"></td>
                <td scope="row">1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td><input type="button" value="删除" class="btnDel"></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" class="check"></td>
                <td scope="row">2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td><input type="button" value="删除" class="btnDel"></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" class="check"></td>
                <td scope="row">3</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td><input type="button" value="删除" class="btnDel"></td>
            </tr>
        </table>
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link">Previous</a>
                </li>
                <li class="page-item active" aria-current="page">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
    </div>
    <div id="footer">
        <iframe src="footer.html" height="320px" width="100%" frameborder="0" scrolling="no"></iframe>
    </div>
</body>

</html>